<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>研学港</title>
  <style>
    body {
      width: 300px;
      min-height: 400px;
      margin: 0;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .header {
      text-align: center;
      margin-bottom: 20px;
    }

    .logo {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .subtitle {
      font-size: 12px;
      opacity: 0.8;
    }

    .status {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 16px;
    }

    .status-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .status-item:last-child {
      margin-bottom: 0;
    }

    .doi-info {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 16px;
      word-break: break-all;
    }

    .doi-label {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 4px;
    }

    .doi-value {
      font-size: 14px;
      font-weight: 500;
    }

    .actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn {
      padding: 12px 16px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-primary {
      background: rgba(255, 255, 255, 0.9);
      color: #4c1d95;
    }

    .btn-primary:hover {
      background: white;
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .hidden {
      display: none;
    }

    .copy-btn {
      padding: 6px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }

    .copy-btn:active {
      transform: scale(0.95);
    }

    .copy-btn.copied {
      background: rgba(34, 197, 94, 0.3);
      border-color: rgba(34, 197, 94, 0.5);
    }

    .footer {
      margin-top: 16px;
      text-align: center;
      font-size: 12px;
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="logo">研</div>
    <div class="title">研学港 Researchopia</div>
    <div class="subtitle">版本 v0.1.1 | 研学并进，智慧共享</div>
  </div>

  <div class="status">
    <div class="status-item">
      <span>当前页面：</span>
      <span id="pageStatus">检测中...</span>
    </div>
    <div class="status-item">
      <span>DOI检测：</span>
      <span id="doiStatus">扫描中...</span>
    </div>
  </div>

  <div id="doiInfo" class="doi-info hidden">
    <div class="doi-label">检测到的DOI：</div>
    <div style="display: flex; align-items: center; gap: 8px;">
      <div id="doiValue" class="doi-value" style="flex: 1;"></div>
      <button id="copyDOI" class="copy-btn" title="复制DOI">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
        </svg>
      </button>
    </div>
  </div>

  <div class="actions">
    <button id="toggleFloat" class="btn btn-primary">
      <span>📌</span>
      <span id="floatText">显示浮动图标</span>
    </button>
    
    <button id="searchBtn" class="btn btn-primary hidden">
      <span>🔍</span>
      <span>在研学港中搜索</span>
    </button>

    <button id="openSidebar" class="btn btn-secondary">
      <span>📖</span>
      <span>打开研学港侧边栏</span>
    </button>

    <button id="openWebsite" class="btn btn-secondary">
      <span>🌐</span>
      <span>访问研学港网站</span>
    </button>
  </div>

  <div class="footer">
    版本 v0.1.1 | 研学并进，智慧共享
  </div>

  <script src="popup.js"></script>
</body>
</html>